<script setup lang="ts">
import { ref } from "vue";
import {
  branchBindUser,
  branchBindUserDto,
  getBoundUserIds
} from "@/api/idp/branch";
import { getUserList } from "@/api/sys/user";

const dataForm = ref<branchBindUserDto>({
  userIds: [],
  branchId: ""
});

const data = ref([]);
const dialogVisible = ref(false);
const onSubmit = () => {
  branchBindUser(dataForm.value).then(() => {
    dialogVisible.value = false;
  });
};
const filterMethod = (query, item) => {
  return item.label.indexOf(query) > -1;
};
const showDialogForBindUser = (id: string) => {
  getUserList().then(res => {
    const li = [];
    res.forEach(item => {
      li.push({
        label: item.extend.nickname,
        key: item.userId
      });
    });
    data.value = li;
    getBoundUserIds(id).then(ids => {
      dataForm.value.userIds = ids;
    });
  });
  dataForm.value.branchId = id;
  dialogVisible.value = true;
};
defineExpose({
  showDialogForBindUser
});
</script>

<template>
  <el-dialog v-model="dialogVisible" title="分配管理员">
    <el-transfer
      v-model="dataForm.userIds"
      filterable
      :filter-method="filterMethod"
      filter-placeholder="按名称过滤"
      :data="data"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
